<template>

  <div>

    <el-card class="box-card">

      <el-row :gutter="20">
        <!--左边待做的事情-->
        <el-col :span="12">
          <!--<div class="row-div">-->
          <!--  <h3 style="">待办</h3>-->
          <!--</div>-->
          <div>
            <el-button type="warning" size="mini" @click="openSaveJotDown">新增</el-button>
          </div>

          <el-table
            max-height="720px"
            height="720px"
            :data="doEventList"
            style="width: 100%">

            <el-table-column
              prop="checkValue"
              width="30"
              label="">
              <template slot-scope="scope">
                <el-checkbox @change="handleCheckboxChange(scope.row.id)" v-model="scope.row.checkValue"></el-checkbox>
              </template>
            </el-table-column>

            <el-table-column
              prop="content"
              label="内容">
              <template slot-scope="scope">
                <span :class="setClass(scope.row.markColor)">{{scope.row.content}}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="createTime"
              label="创建时间">
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="220">
              <template slot-scope="scope">
                <el-button @click="updateJotDownTips(scope.row)" type="text" size="small"><i class="el-icon-view"></i>修改</el-button>

                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    <el-link type="primary">切换</el-link>
                    <!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="updateColour(1, scope.row)" >红色</el-dropdown-item>
                    <el-dropdown-item @click.native="updateColour(2, scope.row)" >蓝色</el-dropdown-item>
                    <el-dropdown-item @click.native="updateColour(3, scope.row)" >黄色</el-dropdown-item>
                    <el-dropdown-item @click.native="updateColour(4, scope.row)" >紫色</el-dropdown-item>
                    <el-dropdown-item @click.native="updateColour(9, scope.row)" >无色</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button @click="delJotDown(scope.row.id)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
              </template>
            </el-table-column>

          </el-table>

          <!--分页部分-->
          <el-pagination
            style="width:33%; margin-right:10px; margin-top: 10px"
            background
            layout="total, prev, pager, next, jumper"
            @current-change="doEventPageCurrentChange"
            :page-size="pageConfigDoEvent.size"
            :current-page="pageConfigDoEvent.current"
            :pager-count="5"
            :total="pageConfigDoEvent.total">
          </el-pagination>

        </el-col>

        <!--右边已完成的事情-->
        <el-col :span="12">
          <!--<div class="row-div" style="background-color: #909399">-->
          <!--  <h3 style="">已办</h3>-->
          <!--</div>-->


          <el-table
            max-height="745px"
            height="745px"
            :data="completeList"
            style="width: 100%">

            <el-table-column
              prop="checkValue"
              width="30"
              label="">
              <template slot-scope="scope">
                <el-checkbox @change="handleCheckboxChange(scope.row.id)" v-model="scope.row.checkValue === 2"></el-checkbox>
              </template>
            </el-table-column>

            <el-table-column
              prop="content"
              label="内容">
              <template slot-scope="scope">
                <span :class="setClass(scope.row.markColor)">{{scope.row.content}}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="createTime"
              label="创建时间">
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="220">
              <template slot-scope="scope">
                <el-button @click="updateJotDownTips(scope.row)" type="text" size="small"><i class="el-icon-view"></i>修改</el-button>

                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    <el-link type="primary">切换</el-link>
                    <!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="updateColour(1, scope.row)" >红色</el-dropdown-item>
                    <el-dropdown-item @click.native="updateColour(2, scope.row)" >蓝色</el-dropdown-item>
                    <el-dropdown-item @click.native="updateColour(3, scope.row)" >黄色</el-dropdown-item>
                    <el-dropdown-item @click.native="updateColour(4, scope.row)" >紫色</el-dropdown-item>
                    <el-dropdown-item @click.native="updateColour(9, scope.row)" >无色</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button @click="delJotDown(scope.row.id)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
              </template>
            </el-table-column>

          </el-table>

          <!--分页部分-->
          <el-pagination
            style="width:33%; margin-right:10px;margin-top: 10px "
            background
            layout="total, prev, pager, next, jumper"
            @current-change="completePageCurrentChange"
            :page-size="pageConfigComplete.size"
            :current-page="pageConfigComplete.current"
            :pager-count="5"
            :total="pageConfigComplete.total">
          </el-pagination>

        </el-col>
      </el-row>

    </el-card>



  </div>

</template>

<script>

  import http from '@/utils/http'

  export default {
    name: "JotDownList",
    data(){
      return {
        // 分页参数-待办
        pageConfigDoEvent: {
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
        // 分页参数-已完成
        pageConfigComplete: {
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
        // 待办
        doEventList: [],
        // 已办
        completeList: [],
      }
    },
    methods: {
      /**
       * 设置颜色，原理是设置class
       * @param markColor
       * @return {string|null}
       */
      setClass(markColor){
        if (markColor == null){
          return null
        } else if (1 === markColor){
          // 红色
          return "red_jot_down"

        } else if (2 === markColor){
          // 蓝色
          return "blue_jot_down"

        } else if (3 === markColor){
          // 黄色
          return "yellow_jot_down"

        } else if (4 === markColor){
          // 紫色
          return "purple_jot_down"

        } else {
          return null
        }
      },
      /**
       * 修改颜色
       * @param colour 颜色值
       * @param obj 对象
       */
      updateColour(colour, obj){
        obj.markColor = colour
        http.post("/jotDown/updJotDown", obj).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.getJotDownListPage(1)
          this.getJotDownListPage(2)

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 删除随手记
       * @param id 随手记主键
       */
      delJotDown(id){
        http.post("/jotDown/delJotDown", {
          id: id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.getJotDownListPage(1)
          this.getJotDownListPage(2)

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 复选框被改变
       * @param id 随手记主键
       */
      handleCheckboxChange(id){
        http.post("/jotDown/switchCheck", {
          id: id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.getJotDownListPage(1)
          this.getJotDownListPage(2)

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页被改变的时候-待办
       * @param value 当前页
       */
      doEventPageCurrentChange(value){
        this.pageConfigDoEvent.current = value
        this.getJotDownListPage(1)
      },
      /**
       * 分页被改变的时候-已办
       * @param value 当前页
       */
      completePageCurrentChange(value){
        this.pageConfigComplete.current = value
        this.getJotDownListPage(2)
      },
      /**
       * 提交新增
       */
      openSaveJotDown(){
        this.$prompt('请输入', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.saveJotDown(value)

        }).catch(() => {
          // 取消
        });
      },
      /**
       * 弹出更新框
       * @param obj 随笔对象
       */
      updateJotDownTips(obj){
        this.$prompt(' ', '请输入', {inputValue:  `${obj.content}`
          // action 是操作的类型，比如这里是确认，value 是输入框中的值
        }).then(({ value, action }) => {
          if(!value){
            return false;
          }
          obj.content = value
          this.updateJotDown(obj)
        })
      },
      /**
       * 更新
       */
      updateJotDown(obj){
        http.post("/jotDown/updJotDown", obj).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.getJotDownListPage(1)
          this.getJotDownListPage(2)

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 保存随手记
       * @param content 随手记内容
       */
      saveJotDown(content){
        http.post("/jotDown/saveJotDown", {
          content: content
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.$message.success("保存成功");
          // 刷新待办区域
          this.getJotDownListPage(1)

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页查询随手记
       * @param checkValue 2 被选中 1未选中
       */
      getJotDownListPage(checkValue){
        let searchParam = {}
        if (checkValue === 1){
          // 未选中
          searchParam = {
            current: this.pageConfigDoEvent.current,
            size: this.pageConfigDoEvent.size,
            checkValue: checkValue,
          }
        } else {
          searchParam = {
            current: this.pageConfigComplete.current,
            size: this.pageConfigComplete.size,
            checkValue: checkValue,
          }
        }

        http.post("/jotDown/getJotDownListPage", searchParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;

          if (checkValue === 1) {
            // 未选中
            this.pageConfigDoEvent.total = data.total;
            this.pageConfigDoEvent.current = data.current;
            this.pageConfigDoEvent.size = data.size;
            // 处理数据
            this.doEventList = data.records

          } else {
            this.pageConfigComplete.total = data.total;
            this.pageConfigComplete.current = data.current;
            this.pageConfigComplete.size = data.size;
            // 处理数据
            this.completeList = data.records
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getJotDownListPage(1)
      this.getJotDownListPage(2)
    }
  }
</script>

<style scoped>

  .box-card {
    /*width: 100%;*/
    max-height: 820px;
    height: 820px;
    /*margin-top: 10px*/
  }

  .row-div {
    background: #409EFF;
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-bottom: 10px;
  }

  .red_jot_down {
    color: red;
    font-weight: 600;
  }

  .blue_jot_down {
    color: blue;
    font-weight: 600;
  }

  .yellow_jot_down {
    color: orange;
    font-weight: 600;
  }

  .purple_jot_down {
    color: purple;
    font-weight: 600;
  }

</style>
